<template>
  <div>
    <!--sticky && header-->
    <sticky>
      <x-header :left-options="{showBack: false}">预约保洁</x-header>
    </sticky>
    <group label-width="3em" label-margin-right="2em" label-align="justify">
      <cell title="区域" value-align="left" value="请选择需要保洁所在区域"></cell>
      <div class="weui-cell vux-cell-form-preview">
        <div class="weui-form-preview__bd">
          <div class="weui-form-preview__item">
            <label class="weui-form-preview__label">一号楼</label>
            <span class="weui-form-preview__value">
              <checker v-model="items1" :max="2" type="checkbox" default-item-class="area-item"
                       selected-item-class="area-item-selected">
                <checker-item value="1">一层</checker-item>
                <checker-item value="2">二层</checker-item>
              </checker>
            </span>
          </div>
          <div class="weui-form-preview__item">
            <label class="weui-form-preview__label">二号楼</label>
            <span class="weui-form-preview__value">
              <checker v-model="items2" :max="2" type="checkbox" default-item-class="area-item"
                       selected-item-class="area-item-selected">
                <checker-item value="3">一层</checker-item>
              </checker>
            </span>
          </div>
          <div class="weui-form-preview__item">
            <label class="weui-form-preview__label">三号楼</label>
            <span class="weui-form-preview__value">
              <checker v-model="items3" :max="2" type="checkbox" default-item-class="area-item"
                       selected-item-class="area-item-selected">
                <checker-item value="4">一层</checker-item>
              </checker>
            </span>
          </div>
          <div class="weui-form-preview__item">
            <label class="weui-form-preview__label">四号楼</label>
            <span class="weui-form-preview__value">
              <checker v-model="items3" :max="2" type="checkbox" default-item-class="area-item"
                       selected-item-class="area-item-selected">
                <checker-item value="5">一层</checker-item>
                <checker-item value="6">二层</checker-item>
              </checker>
            </span>
          </div>
        </div>
      </div>
      <x-input title="部门" v-model="bumen" placeholder="请输入需要保洁的具体部门"></x-input>
      <x-input title="描述" v-model="miaoshu" placeholder="请对保洁内容进行适当的描述"></x-input>

      <div class="weui-uploader" style="padding:15px;">
        <div class="weui-uploader__hd">
          <p class="weui-uploader__title">上传照片</p>
        </div>
        <div class="weui-uploader__bd">
          <ul class="weui-uploader__files" id="uploaderFiles">
            <li class="weui-uploader__file weui-uploader__file_status" v-for="item in imgSrcList">
              <img :src="item" alt="" style="width: 100%;height: 100%">
            </li>
          </ul>
          <div class="weui-uploader__input-box">
            <input id="uploaderInput" name="image[]" class="weui-uploader__input" type="file" accept="image/*"
                   multiple
                   @change="avatarChange"/>
          </div>
        </div>
        <div class="weui-uploader__hd">
          <p class="weui-uploader__title">最多可上传四张</p>
        </div>
      </div>

      <x-button class="submit-btn" @click.native="submit">提交</x-button>
    </group>
  </div>

</template>

<script>
  import {
    XHeader,
    Sticky,
    Checker,
    CheckerItem,
    GroupTitle,
    Group,
    Cell,
    XInput,
    CellFormPreview,
    XButton
  } from 'vux'
  import lrz from 'lrz'

  export default {
    components: {
      XHeader,
      Sticky,
      Checker,
      CheckerItem,
      GroupTitle,
      Group,
      Cell,
      XInput,
      CellFormPreview,
      XButton
    },
    data() {
      return {
        items1: [],
        items2: [],
        items3: [],
        area: null,
        bumen: '',
        miaoshu: '',
        imgIdList: [], // 照片组
        imgSrcList: [] // 照片组
      }
    },
    methods: {
      avatarChange(e) {
        if (e.target.files.length > 4) {
          this.$vux.toast.show({
            text: '最多可上传四张',
            type: 'warn'
          })
        } else {
          const _this = this
          this.$vux.loading.show({
            text: '上传中'
          })
          for (let item of e.target.files) {
            let file = item
            lrz(file, {width: 900, height: 900})
              .then((rst) => {
                return rst
              }).then((rst) => {
                let param = new FormData() // 创建form对象
                param.append('image[]', rst.file, file) // 通过append向form对象添加数据
                let config = {
                  // 添加请求头
                  headers: {'Content-Type': 'multipart/form-data'}
                }
                // 上传图片
                this.$http.post('/api/file/up', param, config).then(response => {
                  _this.imgSrcList.push(response.data.data[0].url)
                  _this.imgIdList.push(response.data.data[0].id)
                  this.$vux.loading.hide()
                  this.$vux.toast.show({
                    text: '上传成功'
                  })
                }, response => {
                  this.$vux.loading.hide()
                  this.$vux.toast.show({
                    text: '上传失败' + this.common.errMsg(response),
                    type: 'warn'
                  })
                })
              }
            ).catch(function (err) {
              this.$vux.loading.hide()
              // 万一出错了，这里可以捕捉到错误信息
              // 而且以上的then都不会执行
              this.$vux.toast.show({
                text: '上传失败' + err,
                type: 'warn'
              })
            })
          }
        }
      },
      submit() {
        let idArray = []
        this.items1.forEach((index) => {
          idArray.push(index)
        })
        this.items2.forEach((index) => {
          idArray.push(index)
        })
        this.items3.forEach((index) => {
          idArray.push(index)
        })
        this.$http.post('/api/clean/post', {
          type: '保洁',
          floor_id: idArray,
          department: this.bumen,
          remark: this.miaoshu,
          photos: JSON.stringify(this.imgIdList)
        }).then(() => {
          this.$vux.toast.show({
            text: '预约成功'
          })
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '../../assets/css/theme.css';
  @import '~vux/src/styles/weui/widget/weui-uploader/index.less';

  .area-item {
    margin-left: 1em;
    border: 1px solid #ececec;
    border-radius: 1em;
    padding: 0 1.5em;
  }

  .area-item-selected {
    background: #3987df;
    color: #fff;
  }

  .vux-cell-form-preview .weui-form-preview__bd {
    width: 100%;
    padding: 0 1em;
  }

  .weui-form-preview__item {
    margin: 1em 0;
  }

  .weui-form-preview__label {
    min-width: 3em;
  }

  .submit-btn {
    width: 30%;
    border-radius: 99px;
    background-color: #3987df;
    color: #fff;
    margin-bottom: 1em;
  }
</style>
